<template>
  <div>
  <el-form
    ref="form_date"
    :disabled = 'route.query.type == 4'
    :model="base_formData"
    :rules="rules"
  >
  <vab-card shadow="never">
    <template #header>
    <div>
      客户基础信息
    </div>
    </template>
    <el-row :gutter="24">
      <el-col
        v-for="(item, index) in baseList"
        :key="index"
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="8"
      >
        <el-form-item :label="item.label" :prop="item.value" v-if = "route.query.type == 2" >
          <el-input
            v-if="
              item.value != 'is_used' &&
              item.value != 'is_group' &&
              item.value != 'use_org_id' &&
              item.value != 'group_cust_id' &&
              item.value != 'cust_type_id' &&
              item.value != 'primary_group' &&
              item.value != 'group_item'
            "
            v-model.trim="item.item"
            :disabled="
              item.value == 'number' ||
              item.value == 'create_org_name' ||
              item.value == 'create_name' ||
              item.value == 'create_date' ||
              item.value =='name' ||
              item.value =='short_name'
            "
            @change="listValue(item.value, $event,'')"
          />
          <el-radio-group
            v-if="item.value == 'is_used' || item.value == 'is_group'"
            v-model="item.item"
            @change="listValue(item.value, $event,'')"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <el-select
            placeholder=" "
            v-if="
              // item.value == 'use_org_id' ||
              item.value == 'cust_type_id' ||
              item.value == 'primary_group'
            "
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,item.children)"
          >
            <el-option
              v-for="item in item.children"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            ref="select_ref"
            remote-show-suffix
            remote
            clearable
            :remote-method="remoteMethod"
            v-if="
              item.value == 'group_cust_id'
            "
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            remote-show-suffix
            remote
            clearable
            :remote-method="remoteMethod"
            ref="select_ref"
            v-if="
               item.value == 'group_item'
            "
            multiple
            collapse-tags
            collapse-tags-tooltip
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            remote-show-suffix
            remote
            clearable
            ref="select_ref"
            v-if="
               item.value == 'use_org_id'
            "
            multiple
            collapse-tags
            collapse-tags-tooltip
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in organizationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="item.label" :prop="item.value" v-if = "route.query.type != 2" :class="item.value === 'name' && 'successDive'">
          <el-input
            v-if="
              item.value != 'is_used' &&
              item.value != 'is_group' &&
              item.value != 'use_org_id' &&
              item.value != 'group_cust_id' &&
              item.value != 'cust_type_id' &&
              item.value != 'primary_group' &&
              item.value != 'group_item'
            "
            v-model.trim="item.item"
            :disabled="
              item.value == 'number' ||
              item.value == 'create_org_name' ||
              item.value == 'create_name' ||
              item.value == 'create_date'
            "
            @change="listValue(item.value, $event,'')"
          >
            <template #append v-if="item.value === 'name' && route.query.status == 1&&route.query.type != 4 || item.value === 'name' && route.query.status == 0 ">
              <el-button type="primary" :icon="Search"  @click="queryBusiness" />
            </template>
          </el-input>
          <el-radio-group
            v-if="item.value == 'is_used' &&route.query.type != 4"
            v-model="item.item"
            @change="listValue(item.value, $event,'')"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <el-radio-group
            v-if=" item.value == 'is_group' &&route.query.type != 4"
            v-model="item.item"
            @change="listValue(item.value, $event,'')"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <span style="color:rgb(168, 171, 178);margin-left: 10px " v-if="item.value == 'is_used'  &&route.query.type == 4" >
            {{item.item == 0 ?'否':'是'}}
          </span>
          <span style="color:rgb(168, 171, 178);margin-left: 10px " v-if="item.value == 'is_group' &&route.query.type == 4" >
            {{item.item == 0 ?'否':'是'}}
          </span>
          <el-select
            placeholder=" "
            ref="select_ref"
            v-if="
              // item.value == 'use_org_id' ||
              // item.value == 'group_cust_id' ||
              item.value == 'cust_type_id' ||
              item.value == 'primary_group'
              // item.value == 'group_item'
            "
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,item.children)"
          >
            <el-option
              v-for="item in item.children"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            ref="select_ref"
            remote-show-suffix
            remote
            clearable
            :remote-method="remoteMethod"
            v-if="
              item.value == 'group_cust_id'
            "
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            remote-show-suffix
            remote
            clearable
            :remote-method="remoteMethod"
            ref="select_ref"
            v-if="
               item.value == 'group_item'
            "
            multiple
            collapse-tags
            collapse-tags-tooltip
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            placeholder=" "
            remote-show-suffix
            remote
            clearable
            ref="select_ref"
            v-if="
               item.value == 'use_org_id'
            "
            multiple
            collapse-tags
            collapse-tags-tooltip
            v-model="item.item"
            filterable
            style="width: 100%"
            @change="listValue(item.value, $event,options)"
          >
            <el-option
              v-for="item in organizationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </vab-card>
  <vab-card shadow="never">
    <template #header>商务信息</template>
    <el-row :gutter="24">
      <el-col
        v-for="(item, index) in businessList"
        :key="index"
        :xs="24"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="8"
      >
        <el-form-item :label="item.label" :prop="item.value">
          <el-input
            v-if="
              item.value == 'contact' ||
              item.value == 'position' ||
              item.value == 'tel'
            "
            v-model.trim="item.item"
            @change="listValues(item.value, $event,'')"
          />
          <el-select
            v-if="
              item.value != 'contact' &&
              item.value != 'position' &&
              item.value != 'tel' &&
              item.value != 'is_credit_check'
            "
            v-model="item.item"
            placeholder=" "
            filterable
            style="width: 100%"
            @change="listValues(item.value, $event,item.children)"
          >
            <el-option
              v-for="item in item.children"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-radio-group
            v-if="item.value == 'is_credit_check' && route.query.type != 4"
            v-model="item.item"
            @change="listValues(item.value, $event,'')"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <span style="color:rgb(168, 171, 178);margin-left: 10px " v-if="item.value == 'is_credit_check'  &&route.query.type == 4" >
            {{item.item == 0 ?'否':'是'}}
          </span>
        </el-form-item>
      </el-col>
    </el-row>
  </vab-card>
  </el-form>
    <CustomerDrawer ref="business" />
  </div>
</template>
<script lang="ts" setup>
  import {ref} from "vue";
  import {organization_list} from "/@/api/dms/organization";
  import {options_list} from "/@/api/dms/options";
  import {customerGroup_list} from "/@/api/dms/customerGroup";
  import { ElMessage, FormRules } from "element-plus";
  import {customer_optionsList} from "/@/api/dms/customer";
 import CustomerDrawer from './SelectCustomerDrawer.vue'
  import { Search } from '@element-plus/icons-vue'
  import customerStore from "/@/views/customerIndex/storeList";

  defineOptions({
    name: 'AddBaseMode',
  })
  const props = defineProps(['base_formDatas','rules','form'])
  const $emits = defineEmits(['update:base_formDatas'])
  const form_date = ref(null)
  defineExpose({
    form_date,
  })
  let options = ref<any>([])
  const get_optionsList =async (id:any,value:any)=>{
   await customer_optionsList({is_group:id == 1 ? 0:1,name:value}).then((data:any)=>{
      if(data.code){
        options.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
  }
  const remoteMethod = async (va:any)=>{
    if(va){
      await get_optionsList(base_formData.is_group,va)
    }
  }
  let base_formData = reactive<any>(props.base_formDatas)
  let exist = ref(props.base_formDatas.is_group)
  const select_ref = ref<any>(null)
  const route:any = useRoute()
  // 使用组织
  const organizationList = ref<any>([])
  //客户类别
  const customer_category = ref<any>([])
  // 币别
  const currency = ref<any>([])
  //付款方式
  const settle_type = ref<any>([])
  //发票类型
  const invoice_type = ref<any>([])
  //开户国家
  const account_country = ref<any>([])
  //结算方式
  const settlement_type = ref<any>([])
  //客户分组
  const customerGroupList = ref<any>([])
  onMounted(()=>{
    get_list()
    get_optionsList(base_formData.is_group,'')
  })
  watch(exist,()=>{
    get_optionsList(exist.value,'')
  })
  const get_list=()=>{
    organization_list({}).then((data:any)=>{
      // console.log(data,'使用组织')
      if(data.code == 200){
        organizationList.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    options_list({module:'customer_category'}).then((data:any)=>{
      // console.log(data,'客户类别')
      if(data.code == 200){
        customer_category.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    options_list({module:'currency'}).then((data:any)=>{
      // console.log(data,'币别')
      if(data.code == 200){
        currency.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    options_list({module:'settle_type'}).then((data:any)=>{
      // console.log(data,'付款方式')
      if(data.code == 200){
        settle_type.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    options_list({module:'invoice_type'}).then((data:any)=>{
      // console.log(data,'发票类型')
      if(data.code == 200){
        invoice_type.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    /*options_list({module:'account_country'}).then((data:any)=>{
      // console.log(data,'开户国家')
      if(data.code == 200){
        account_country.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })*/
    options_list({module:'settlement_type'}).then((data:any)=>{
      // console.log(data,'结算方式')
      if(data.code == 200){
        settlement_type.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
    customerGroup_list({}).then((data:any)=>{
      // console.log(data,'客户分组')
      if(data.code == 200){
        customerGroupList.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
  }
  let baseList = ref<any>([
    { label: '客户名称', value: 'name', item: base_formData.name },
    { label: '客户简称', value: 'short_name', item: base_formData.short_name },
    { label: '客户编码', value: 'number', item: base_formData.number },
    {
      label: '客户分组',
      value: 'primary_group',
      item: base_formData.primary_group,
      children: customerGroupList,
    },
    {
      label: '使用组织',
      value: 'use_org_id',
      item:  base_formData.use_org_id !=''? base_formData.use_org_id.split(","):'',
      children:organizationList,
    },
    { label: '启用', value: 'is_used', item: base_formData.is_used },
    { label: '集团客户', value: 'is_group', item: base_formData.is_group },
    {
      label: base_formData.is_group == 0 ?  '所属集团': '下属公司',
      value: base_formData.is_group == 0 ?  'group_cust_id': 'group_item',
      item:  base_formData.is_group == 0 ? base_formData.group_cust_id : base_formData.group_item && base_formData.group_item.split(","),
    },
    {
      label: '客户类别',
      value: 'cust_type_id',
      item: base_formData.cust_type_id,
      children: customer_category,
    },
    {
      label: '创建组织',
      value: 'create_org_name',
      item: base_formData.create_org_name,
    },
    { label: '创建人', value: 'create_name', item: base_formData.create_name },
    {
      label: '创建时间',
      value: 'create_date',
      item: base_formData.create_date,
    },
  ])
  const businessList = reactive([
    {
      label: '结算币别',
      value: 'trading_curr_id',
      item: base_formData.trading_curr_id,
      children: currency,
    },
    {
      label: '结算方式',
      value: 'settle_type_id',
      item: base_formData.settle_type_id,
      children: settlement_type,
    },
    {
      label: '发票类型',
      value: 'invoice_type',
      item: base_formData.invoice_type,
      children:invoice_type,
    },
    {
      label: '价目表',
      value: 'price_list_id',
      item: base_formData.price_list_id,
      children: [
        { label: '价目表', value: '0' },
        { label: '价目表1', value: '1' },
        { label: '价目表2', value: '2' },
      ],
    },
    {
      label: '启用信用管理',
      value: 'is_credit_check',
      item: base_formData.is_credit_check,
      children: [
        { label: '启用', value: 1 },
        { label: '禁止', value: 0 },
      ],
    },
    {
      label: '付款方式',
      value: 'payer',
      item: base_formData.payer,
      children: settle_type,
    },
    { label: '联系人名称', value: 'contact', item: base_formData.contact },
    { label: '职务', value: 'position', item: base_formData.position },
    { label: '联系电话', value: 'tel', item: base_formData.tel },
  ])
  const invoiceList = reactive([
    {
      label: '发票抬头',
      value: 'invoice_title',
      item: base_formData.invoice_title,
    },
    {
      label: '纳税登记号',
      value: 'tax_register_code',
      item: base_formData.tax_register_code,
    },
    {
      label: '开户银行',
      value: 'invoice_bank_name',
      item: base_formData.invoice_bank_name,
    },
    {
      label: '银行账号',
      value: 'invoice_bank_account',
      item: base_formData.invoice_bank_account,
    },
    {
      label: '开票联系电话',
      value: 'invoice_tel',
      item: base_formData.invoice_tel,
    },
    {
      label: '开票通讯地址',
      value: 'invoice_address',
      item: base_formData.invoice_address,
    },
    {
      label: '统一社会信用代码',
      value: 'socialcre_code',
      item: base_formData.socialcre_code,
    },
  ])
  const listValue = (va: any,e:any,ma:any) => {
    if(va == 'primary_group'){
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.primary_group_name =ma.filter((i:any)=>i.value == e)[0].label )
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'cust_type_id'){
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.cust_type_name =ma.filter((i:any)=>i.value == e)[0].label )
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'use_org_id'){
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e.toString() )
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'group_cust_id'){
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.group_cust_name =ma.filter((i:any)=>i.value == e)[0].label )
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'group_item'){
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e.toString() )
        }else {
          return {
            ...i
          }
        }
      })
    }else {
      baseList.value.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e )
        }else {
          return {
            ...i
          }
        }
      })
    }
    if(va == 'is_group'){
      options.value = []
      exist.value = e
      if(e == 0){
        baseList.value = [
          { label: '客户名称', value: 'name', item: base_formData.name },
          { label: '客户简称', value: 'short_name', item: base_formData.short_name },
          { label: '客户编码', value: 'number', item: base_formData.number },
          {
            label: '客户分组',
            value: 'primary_group',
            item: base_formData.primary_group,
            children: customerGroupList,
          },
          {
            label: '使用组织',
            value: 'use_org_id',
            item: base_formData.use_org_id,
            children:organizationList,
          },
          { label: '启用', value: 'is_used', item: base_formData.is_used },
          { label: '集团客户', value: 'is_group', item: base_formData.is_group },
          {
            label: '所属集团',
            value: 'group_cust_id',
            item: base_formData.group_cust_id,
          },
          {
            label: '客户类别',
            value: 'cust_type_id',
            item: base_formData.cust_type_id,
            children: customer_category,
          },
          {
            label: '创建组织',
            value: 'create_org_name',
            item: base_formData.create_org_name,
          },
          { label: '创建人', value: 'create_name', item: base_formData.create_name },
          {
            label: '创建时间',
            value: 'create_date',
            item: base_formData.create_date,
          },
        ]
        base_formData.group_item = ''
        base_formData.group_item_name = ''
        baseList.value.map((i:any)=>{
          if(i.value=='group_cust_id'){
            return {
              ...i,
              item:'',
            }
          }else {
            return {
              ...i
            }
          }
        })
      }else {
        baseList.value = [
          { label: '客户名称', value: 'name', item: base_formData.name },
          { label: '客户简称', value: 'short_name', item: base_formData.short_name },
          { label: '客户编码', value: 'number', item: base_formData.number },
          {
            label: '客户分组',
            value: 'primary_group',
            item: base_formData.primary_group,
            children: customerGroupList,
          },
          {
            label: '使用组织',
            value: 'use_org_id',
            item: base_formData.use_org_id,
            children:organizationList,
          },
          { label: '启用', value: 'is_used', item: base_formData.is_used },
          { label: '集团客户', value: 'is_group', item: base_formData.is_group },
          {
            label: '下属公司',
            value: 'group_item',
            item: base_formData.group_item,
          },
          {
            label: '客户类别',
            value: 'cust_type_id',
            item: base_formData.cust_type_id,
            children: customer_category,
          },
          {
            label: '创建组织',
            value: 'create_org_name',
            item: base_formData.create_org_name,
          },
          { label: '创建人', value: 'create_name', item: base_formData.create_name },
          {
            label: '创建时间',
            value: 'create_date',
            item: base_formData.create_date,
          },
        ]
        base_formData.group_cust_id = ''
        base_formData.group_cust_name = ''
        baseList.value.map((i:any)=>{
          if(i.value=='group_item'){
            return {
              ...i,
              item:'',
            }
          }else {
            return {
              ...i
            }
          }
        })
      }
    }
    $emits('update:base_formDatas', base_formData)
  }
  const listValues = (va: any,e:any,ma:any) => {
    if(va == 'trading_curr_id'){
      businessList.map((i: any) => {
        if(i.value == va ){

          return (base_formData[va] = e,base_formData.trading_curr_name = ma?.filter((i:any)=>i.value == e)[0].label)
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'settle_type_id'){
      businessList.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.settle_type_name = ma?.filter((i:any)=>i.value == e)[0].label)
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'invoice_type'){
      businessList.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.invoice_type_name = ma?.filter((i:any)=>i.value == e)[0].label)
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'price_list_id'){
      businessList.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.price_list_name = ma?.filter((i:any)=>i.value == e)[0].label)
        }else {
          return {
            ...i
          }
        }
      })
    }else if(va == 'payer'){
      businessList.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e,base_formData.payer_name = ma?.filter((i:any)=>i.value == e)[0].label)
        }else {
          return {
            ...i
          }
        }
      })
    }else {
      businessList.map((i: any) => {
        if(i.value == va ){
          return (base_formData[va] = e)
        }else {
          return {
            ...i
          }
        }
      })
    }
    $emits('update:base_formDatas', base_formData)
  }
  const form = ref(null)
  const rules = ref<FormRules<any>>({
    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
    is_used: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
    is_group: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
    price_list_id: [
      {
        required: true,
        message: '请选择价目表',
        trigger: 'change',
      },
    ],
    is_credit_check: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur',
      },
    ],
    contact: [
      {
        required: true,
        message: '请输入联系人名称',
        trigger: 'blur',
      },
    ],
    tel: [{ required: true, message: '请输入手机号码', trigger: 'blur' },],
    payer: [
      {
        required: true,
        message: '请选择付款方式',
        trigger: 'change',
      },
    ],
  })
  // 查询工商信息
  const business = ref<any>(undefined)
  const queryBusiness = ()=>{
    if(base_formData.name !=''){
      business.value.drawer=true
      business.value.name = base_formData.name
      pintStoreList.setBusinessInformationDate(undefined)
    }else {
      ElMessage.warning(`客户名称不能为空`)
    }
  }
  const pintStoreList = customerStore()
  // 企业信息回填   青岛黛优佳生物科技有限公司
  watchEffect(()=>{
    const {businessInformationDate}:any = pintStoreList
    if(businessInformationDate){
      const arr1 = businessInformationDate.filter((i:any)=> i.field == 'companyName')
      baseList.value = baseList.value.map((item:any)=>{
        if(item.value == 'name'){
          return{
            ...item,
            item:arr1.length == 0 ? item.name:arr1[0].label
          }
        }else {
          return item
        }
      })
      props.base_formDatas.name = arr1.length == 0 ? props.base_formDatas.name:arr1[0].label
      setTimeout(()=>{
        pintStoreList.setBusinessInformationDate(undefined)
      },3000)
    }
  })

</script>
<style lang="scss" scoped>
.successDive{
  :deep(){
    .el-input-group__append{
      height: 100%;
      background-color: #276ff5;
      box-shadow:none;
    }
    .el-icon{
      color: #fff;
    }
  }
}
</style>
